import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Button } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';

const Innovative = props => {
  const { className, ...rest } = props;

  return (
    <div className={clsx('jarallax', className)} {...rest}>
      <SectionHeader
        title="OUR INNOVATIVE STRUCTURE"
        titleVariant="h2"
        subtitle="At Crowded, we believe that our business structure will soon become one of the biggest segments in the industry. We offer very competitive streaming rates AND shareholder opportunities to artists and record labels. Shareholders OWN the company and are in position to control the overall future of the platform. Independent artists will get the resources and opportunities they need to become more successful in the entertainment industry. We’ve only just started, but we already know that there are artists and record labels that know how to maximize ownership. Join us in changing the culture of the media streaming industry."
        ctaGroup={[
          <Button variant="contained" color="primary" size="large">
            Join Crowded Streaming
          </Button>,
        ]}
        disableGutter
        data-aos="fade-up"
      />
    </div>
  );
};

Innovative.propTypes = {
  /**
   * External classes
   */
  className: PropTypes.string,
};

export default Innovative;
